<template>
        <div>
            <!-- 头部 -->
            <div v-if="playList" class="banner">
                <div class="hotopct">
                    <div class="hoticon"></div>
                    <p>
                        更新日期:{{playList.updateTime|formatDate}}
                    </p>
                </div>
            </div>
            <!-- 歌单 -->
            <ul class="newsong" v-if="hotSong.length>0">
                <li v-for="(s,index) in hotSong" :key="index">
                    <SongItem :item="s"><div class="musicIndex">{{index+1>9 ? (index+1) : '0' + (index+1)}}</div></SongItem>
                </li>
            </ul>
            <!-- 加载 -->
             <Loading v-if="isLoading"></Loading>
             <div class="loadMore" @click="addMore" v-show="!isLoading">{{ nomore ? "已经到底咯" : "点击加载更多..." }}</div>
        </div>
</template>
<script>
import SongItem from '@/components/SongItem'
import Loading from '@/components/Loading'
export default {
    name:"Hot",
    data(){
        return {
            hotSong:[],
            playList:null,
            page: 1,
            isLoading: true,
            nomore: false
        }
    },
    created(){
        this.loadMusic();
        window.addEventListener("scroll", this.handleScroll);
    },
    methods:{
        loadMusic(){
            //获取歌单详情
            this.$http.get('/playlist/detail?id=3778678').then(data=>{
                //把tracksID变成字符串
                let trackIDS=data.data.playlist.trackIds.slice((this.page-1)*20,this.page*20);
                this.playList=data.data.playlist;
                let ids=trackIDS.map(d=>{
                        return d.id;
                    })
                return ids.join(',');
            }).then(ids=>{
                // console.log(ids);
                //获取歌曲详情
                this.$http.get('/song/detail?ids='+ids).then(songData=>{
                    this.isLoading = false;
                    songData.data.songs.map(d=>{
                        //处理数据和 SongItem不一致 转换数据
                        d.song={
                            artists:d.ar
                        }
                        this.hotSong.push(d);
                        return d;
                    })
                });
            }).catch(err=>{
                console.log(err);
            });
        },
        addMore () { 
            this.page ++;
            console.log(this.page);
            if (this.page>10) {
                //如果大于总页数停止请求数据
                this.nomore = true;
                return false;
            } else {
                this.loadMusic();
                this.isLoading = true;
            }
        }
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll, false);
    },
    components:{
        SongItem,
        Loading
    },
    filters:{
        formatDate(val){
            let date=new Date(val);
            return (date.getMonth()+1)+'月'+date.getDate()+'日';
        }
    }
}
</script>
<style lang="less" scoped>
.banner{
    position: relative;
    padding-top: 38.9%;
    background: url(../assets/img/hot_music_bg.jpg) no-repeat;
    background-size: contain;
    &::after{
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-color: rgba(0,0,0,.2);
    }
    .hotopct{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .hoticon{
        width: 142px;
        height: 67px;
        background: url(../assets/img/index_icon.png) no-repeat -24px -30px;
        background-size: 166px 97px;
    }
    p{
        margin-top: 10px;
        color: hsla(0,0%,100%,.8);
        font-size: 12px;
    }
}
.newsong{
    li{
        &:nth-child(1){
            div>.musicIndex{
                color: #df3436;
            }
        }
        &:nth-child(2){
            div>.musicIndex{
                color: #df3436;
            }
        }
        &:nth-child(3){
            div>.musicIndex{
                color: #df3436;
            }
        }
        div>.musicIndex{
            text-align: center;
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 55px;
            font-size: 17px;
            color: #999;
        }
    }
}
.loadMore{
    padding: 10px 0px;
    text-align: center;
    color: #df3436;
}
</style>